<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1 id="hh">{{msg}}</h1>
    </div>
</body>
</html>
<script src="http://unpkg.zhimg.com/vue@2"></script>
<script>
    let vm = new Vue({
        
        data:{
            msg:'你吃了马'
        },
        // 创建之前
        beforeCreate () {
            
            // 初始化事件，初始化生命周期,组件创建出来只会执行一次
            console.group('beforeCreate')
            // 输出组件的数据
            console.log('$data==========',this.$data);
            // 输出dom节点
            console.log('$el===========',this.$el);
            console.log('hh的innertext',document.getElementById('hh').innerText)
            console.groupEnd()
        },
        // 创建之后
        created () {
            // 可以发送异步请求
            // 注入数据,并且对数据进行了劫持和响应,组件创建出来只会执行一次
            // 在这里data method computed 都可以使用了
            // 在这里不能操作dom
           
            console.group('created')
            // 输出组件的数据
            console.log('$data==========',this.$data);
            // 输出dom节点
            console.log('$el===========',this.$el);
            console.log('hh的innertext',document.getElementById('hh').innerText)
            console.groupEnd()
        },
        // 挂载之前
        beforeMount () {
            // 可以发送异步请求 0                                                           
            // 会根据模板的内容,在内存中创建虚拟dom,组件(实例)创建出来只会执行一次
            // 虚拟dom已经被创建了,但是里面的指令和插值表达式中的数据都没有被解析
            // 不能操作dom,因为虚拟dom还没有替换模板中的dom
            console.group('beforeMount')
            // 输出组件的数据
            console.log('$data==========',this.$data);
            // 输出dom节点
            console.log('$el===========',this.$el);
            console.log('hh的innertext',document.getElementById('hh').innerText)
            console.groupEnd()
        },
        // 挂载之后
        mounted () {
            // 可以发送异步请求
            // 会将创建出来并且编译好的虚拟dom,直接替换掉模板里面的结构,组件(实例)创建出来只会执行一次
            // 可以操作dom,这里的虚拟dom已经进行了编译,替换掉了原来模板中的结构
            console.group('mounted')
            // 输出组件的数据
            console.log('$data==========',this.$data);
            // 输出dom节点
            console.log('$el===========',this.$el);
            console.log('hh的innertext',document.getElementById('hh').innerText)
            console.groupEnd()
        },
        // 更新之前
        beforeUpdate () {
            // 初始化事件，初始化生命周期
            console.group('beforeUpdate')
            // 输出组件的数据
            console.log('$data==========',this.$data);
            // 输出dom节点
            console.log('$el===========',this.$el);
            console.log('hh的innertext',document.getElementById('hh').innerText)
            console.groupEnd()
        },
        // 更新之后
        updated () {
            // 初始化事件，初始化生命周期
            console.group('updated')
            // 输出组件的数据
            console.log('$data==========',this.$data);
            // 输出dom节点
            console.log('$el===========',this.$el);
            console.log('hh的innertext',document.getElementById('hh').innerText)
            console.groupEnd()
        },
        // 销毁之后
        beforeDestroy () {
               // 初始化事件，初始化生命周期
               console.group('beforeDestroy')
            // 输出组件的数据
            console.log('$data==========',this.$data);
            // 输出dom节点
            console.log('$el===========',this.$el);
            console.log('hh的innertext',document.getElementById('hh').innerText)
            console.groupEnd()
        },
        // 销毁之后
        destroyed () {
            
        }
    }).$mount('#app')
</script>